<template>
  <div>
    <el-card class="box-card">
      <div class="news_header">
        <MainSearchForm :formList="formList" :formValue="formValue" @formReset="formChange" @formSearch="formChange"></MainSearchForm>
        <!-- <el-button size="mini" type="primary" class="add-btn" @click="addNews">新增</el-button> -->
      </div>
      <div class="main_table mg-t-0" style="min-height: 600px">
        <MainTable
          ref="orderTable"
          :loading="listLoading"
          :columns="columns"
          :tableData="tableData"
          showIndex
        >
          <template v-slot:qualification="{ row }">
            <div class="qualification">
              <div @click="openFileds(row.company_qualification)" v-html="`${row.company_qualification}`" v-if="row.company_qualification"></div>
            </div>
          </template>
          <el-table-column label="操作" width="200">
            <template slot-scope="scope">
              <div class="look-video" @click="lookVideo(scope.row)">
                <img src="@/assets/new_image/video.png" alt="">
                <p>实时视频</p>
              </div>
            </template>
          </el-table-column>
        </MainTable>
      </div>

      <div class="pagination-right">
        <MainPagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          layout=" ->,total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </MainPagination>
      </div>
      <main-dialog title="供应商资质" :showDialog="dialogVisibles" width="40%" @close="dialogVisibles = false">
        <template v-slot:content>
          <div class="dialog-zizhi" v-html="companyQualification"></div>
        </template>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogVisibles = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisibles = false">确 定</el-button>
        </div>
      </main-dialog>
      <main-dialog title="实时视频" :showDialog="videoVisibles" width="40%" @close="closeVideo">
        <template v-slot:content>
          <div class="video" :id="codeId"></div>
        </template>
        <div slot="footer" class="dialog-footer">
          <el-button @click="closeVideo">取 消</el-button>
          <el-button type="primary" @click="closeVideo">确 定</el-button>
        </div>
      </main-dialog>
    </el-card>
  </div>
</template>

<script>
import { getCompanyVideoList } from "@/api/traceability/index";
import { apiUrl, objKeySort, Md5 } from "@/utils/public";
import MainTable from '@/components/MainTable/table.vue'
import EZUIKit from "ezuikit-js";
import { foodData } from '../MockData'
const { columns, formList, formValue } = foodData
export default {
  name: "news",
  components: {
    MainTable
  },
  data() {
    return {
      handleScrool: "",
      formList,
      formValue,
      sendTime: [],
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      // 勾选的数据
      multipleSelection: [],
      // 新闻日期
      pickerOptions: [],
      listLoading: false,
      dialogData:{
        title:"",
        status:false,
        mydata:{}
      },
      columns,
      dialogVisibles: false,
      companyQualification: '',  //  供应商资质
      traceCode: '',
      codeId: '',
      videoVisibles: false
    };
  },
  activated() {
    this.getData();
  },

  methods: {
    openFileds(val) {
      this.companyQualification = val
      this.dialogVisibles = true
    },
    //  表单搜索
    formChange() {
      this.currentPage = 1
      this.pageSize = 20
      this.getData()
    },
    getData() {
      this.listLoading = true;
      let data = {
        page: this.currentPage,
        page_size: this.pageSize,
        ...this.formValue
      };
      let query = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name, data)) + apiUrl().appsecret
          ),
        },
        apiUrl().name,
        data,
      );
      getCompanyVideoList(query).then(
        (res) => {
          this.listLoading = false;
          this.tableData = res.data.list;
          this.total = res.data.count;
          this.formList[2].options = res.data.region_list.map(el => {
            return {
              label: el.mername,
              value: el.id
            }
          })
        },
        (err) => {
          console.log(err);
        }
      );
    },
    close(){
      this.dialogData.status=false;
      location.reload()
    },
    // 勾选的数据
    handleSelectionChange(val) {
      console.log("val", val);
      this.multipleSelection = val;
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getData();
    },
    //  实时视频
    lookVideo(row) {
      const that = this
      this.videoVisibles = true
      this.codeId = 'shipingid'
      this.$nextTick(() => {
        if (row.company_yingshi) {
          that.traceCode = new EZUIKit.EZUIKitPlayer({
            id: 'shipingid', // 视频容器ID
            accessToken: row.token,
            url: row.company_yingshi,
            width: 708,
            height: 500,
            audio: 0,
            header: ["capturePicture"],
            footer: ["broadcast", "hd", "fullScreen"],
            handelError: (data) => {
              that.traceCode.resume();
              console.log("失败回调", data);
            },
          });
          // console.log(this.player);
          // console.log('播放器已加载完成');
          that.traceCode.stop();
          that.traceCode.play();
        }
      });
    },
    closeVideo() {
      this.videoVisibles = false
      if(this.traceCode && this.traceCode.stop) {
        this.traceCode.stop()
      }
    }
  },
  created() {
  },
};
</script>
<style lang="scss" scoped>
@import '../index.scss';
.qualification {
  cursor: pointer;
  height: 76px;
  /deep/img {
    width: auto !important;
    height: 76px !important;
  }
}
.dialog-zizhi {
  overflow-y: auto;
  /deep/img {
    width: 100% !important;
    height: auto !important;
  }
}
.dialog-footer {
  @include flex(flex-end, center);
}
.look-video {
  @include flex(flex-start, center);
  cursor: pointer;
  img {
    width: 38px;
  }
  p {
    color: $theme_font_color;
    margin-left: 15px;
  }
}
.video {

}
</style>
